<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>通知公告</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/layui/css/layui.css?v=${FILE_VERSION}" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/style/admin.css?v=${FILE_VERSION}" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/zTree_v3/css/metroStyle/metroStyle.css?v=${FILE_VERSION}" type="text/css">
    <style type="text/css">
        .moreDetailA{
            border-bottom:2px solid #53b4f1;
            padding:0 4px 1px 0px;
            cursor: pointer;
        }
        .activeA{
            border-bottom:2px solid #FF4500;
        }
    </style>
</head>
<body>
<input type="hidden" id="orgId" value="${orgId}">
<input type="hidden" id="orgName" value="${orgName}">
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">通知公告</div>
        <div class="layui-card-body">
            <div class="layui-row layui-col-space10">
                    <c:if test="${roleScope== '3'}">
                        <div class="layui-col-xs12">
                    </c:if>
                    <c:if test="${roleScope!= '3'}">
                        <div class="layui-col-xs2">
                            <div style="border: 1px solid #ccc;max-height: 650px;min-height:400px; overflow: auto;" >
                                <ul id="treeRegion" class="ztree"></ul>
                            </div>
                        </div>
                        <div class="layui-col-xs10" style="padding-left: 15px">
                    </c:if>
                        <div class="layui-form layer-query">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 120px">类型：</label>
                                    <div class="layui-input-inline">
                                        <select id="type">
                                            <option selected="selected" value="">选择类型</option>
                                            <c:forEach items="${noticeTypeMap}" var="t">
                                                <option value="${t.key }">${t.value }</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">标题：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="title" placeholder="请输入标题"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn layui-btn-primary layui-border-blue" onclick="reload()">查询</button>
                                </div>
                            </div>
                        </div>
                        <hr class="layui-bg-green">
                        <table class="layui-table" lay-filter="tableList" id="layerTable">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-primary layui-border-blue" onclick="addLayerLocal()">新增</button>
        <button class="layui-btn layui-btn-primary layui-border-blue" onclick="modi('/sys/orgNotice/edit/input');">编辑</button>
        <button class="layui-btn layui-btn-primary layui-border-red" onclick="deleteBatch('/sys/orgNotice/del/deleteByIds');">删除</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="readTpl">
    {{#  if(d.userRead!=0){ }}
        <span class="moreDetailA"
              onclick="userReadDetail(this,'{{d.orgId}}','{{d.id}}')">
            {{ d.userRead }}
        </span>
    {{#  } else { }}
    {{ d.userRead }}
    {{#  } }}
</script>

<script src="${pageContext.request.contextPath}/static/js/common-2.0.0.js?v=${FILE_VERSION}"></script>
<script src="${pageContext.request.contextPath}/static/layuiadmin/layui/layui.js?v=${FILE_VERSION}"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js?v=${FILE_VERSION}"></script>
<script src="${pageContext.request.contextPath}/static/js/common/core-2.0.0.js?v=${FILE_VERSION}"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/zTree_v3/js/jquery.ztree.core.js?v=${FILE_VERSION}"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/zTree_v3/js/jquery.ztree.excheck.js?v=${FILE_VERSION}"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/common/commOrgTree.js?v=${FILE_VERSION}"></script>
<script>
    var table;
    layui.use(['table','element','form'], function(){
        if('${roleScope}'!='3'){
            //创建树结构
            createOrgTree(false,"/sys/org/list/listAllTree",false);
        }
        table = layui.table;
        table.render({ //其它参数在此省略
            elem : '#layerTable',
            even :"true",
            toolbar: '#toolbar',
            defaultToolbar: ['filter', 'exports', 'print'],
            limit: 10,
            limits: [10,20,30],
            id: 'tableList',
            url: getContextPath() + '/sys/orgNotice/list/listInfo',
            where:{
                "orgId": $('#orgId').val()
            },
            page:true,
            method: 'post', //如果无需自定义HTTP类型，可不加该参数
            cols:  [[ //标题栏
                {checkbox: true, fixed: true}
                ,{field:'title', minWidth: 140,title:"标题"}
                ,{field:'typeName', width:160,title:"类型"}
                ,{field:'content', minWidth: 200,title:"内容"}
                ,{field:'userRead', minWidth: 140,title:"已读人数",templet:'#readTpl'}
                ,{field:'orgName', width:300,sort: true,title:"所属机构"}
                ,{field : 'dateCreate',width : 160,title : '创建时间',templet : '<div>{{layui.util.toDateString(d.dateCreate, "yyyy-MM-dd HH:mm:ss")}}</div>'}
                ,{fixed: 'right', width:180, align:'center',title:"操作", toolbar: '#barDemo'}
            ]],
            request: {
                pageName: 'current', //页码的参数名称，默认：page
                limitName: 'size', //每页数据量的参数名，默认：limit
            }
        });

        //监听工具条
        table.on('tool(tableList)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                deleteById(data,obj,'/sys/orgNotice/del/deleteById');
            }else if(obj.event === 'edit'){
                addLayer('/sys/orgNotice/edit/input', data.id);
            }
        });
    });

    function  addLayerLocal() {
        addLayer('/sys/orgNotice/add/input?orgId='+  $('#orgId').val());
    }

    function reload(){
        table.reload('tableList', {
            where: {
                "title" : $("#title").val(),
                "orgId": $('#orgId').val()
            }
        });
    }

    function orgTreeClickCallback(node){
        $('#orgId').val(node.id);
        reload();
    }


    function userReadDetail(el, orgId, noticeId){
        $(".activeA").removeClass("activeA");
        $(el).addClass("activeA");
        var url = '/sys/orgNotice/userReadDetail?orgId=' + orgId + "&noticeId="+noticeId;
        layer.open({
            title : "已读明细",
            type: 2,
            area: ['70%', '95%'],
            anim: 2,
            content: [url, 'yes']
        });
    }

</script>
</body>
</html>